<template>
  <view class="input flex">
    <view v-if="type === 'digit'" class="value" @click="onFocus">
      {{ value }}
    </view>
    <view v-if="type === 'password'" class="pwd-value flex" @click="onFocus">
      <template v-for="item in 6" :key="item">
        <view class="p-item flex">
          <uni-icons
            type="smallcircle-filled"
            size="14"
            color="#222"
            :style="{ opacity: value.length >= item ? '1' : '0' }"
          ></uni-icons>
        </view>
      </template>
    </view>
    <uni-popup
      ref="popupRef"
      type="bottom"
      mask-background-color="rgba(0,0,0,0)"
      :safe-area="false"
    >
      <view class="keyboard">
        <view v-if="type === 'digit'" class="digit-mode">
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('1')"
          >
            1
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('2')"
          >
            2
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('3')"
          >
            3
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('回退')"
          >
            <uni-icons
              custom-prefix="iconfont"
              type="icon-backspace"
              size="20"
              color="#222"
            ></uni-icons>
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('4')"
          >
            4
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('5')"
          >
            5
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('6')"
          >
            6
          </view>
          <view
            class="item confirm"
            hover-class="confirm-curr"
            hover-start-time="0"
            hover-stay-time="0"
            :style="{
              backgroundColor:
                value.charAt(value.length - 1) === '.' ? '#6bee88' : '#57be6b',
            }"
            @click="onKeyboard('确定')"
          >
            确定
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('7')"
          >
            7
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('8')"
          >
            8
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('9')"
          >
            9
          </view>
          <view
            class="item zero"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('0')"
          >
            0
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('.')"
          >
            .
          </view>
        </view>
        <view v-if="type === 'password'" class="password-mode">
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('1')"
          >
            1
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('2')"
          >
            2
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('3')"
          >
            3
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('4')"
          >
            4
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('5')"
          >
            5
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('6')"
          >
            6
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('7')"
          >
            7
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('8')"
          >
            8
          </view>
          <view
            class="item"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('9')"
          >
            9
          </view>
          <view class="item empty"> </view>
          <view
            class="item zero"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('0')"
          >
            0
          </view>
          <view
            class="item empty"
            hover-class="current"
            hover-start-time="0"
            hover-stay-time="0"
            @click="onKeyboard('回退')"
          >
            <uni-icons
              custom-prefix="iconfont"
              type="icon-backspace"
              size="20"
              color="#222"
            ></uni-icons>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    required: false,
  },
  focus: {
    type: Boolean,
    required: false,
  },
  value: {
    type: String,
    required: false,
  },
  background: {
    type: String,
    required: false,
    default: "#ededed",
  },
});

const emits = defineEmits([
  "update:value",
  "check",
  "confirm",
  "submit",
  "close",
]);

const popupRef = ref(null);
// const keyboardBottom = ref

const onFocus = () => {
  popupRef.value.open();
};

const onKeyboard = (key) => {
  switch (key) {
    case "回退":
      emits("update:value", props.value.slice(0, -1));
      break;
    case "确定":
      if (props.value.charAt(props.value.length - 1) !== ".") {
        emits("confirm");
        popupRef.value.close();
      }
      break;
    case ".":
      if (props.value && !props.value.includes("."))
        emits("update:value", `${props.value}${key}`);
      break;
    default:
      if (!props.value.includes(".")) {
        switch (props.type) {
          case "digit":
            emits("update:value", `${props.value}${key}`);
            break;
          case "password":
            emits(
              "update:value",
              props.value.length < 6 ? `${props.value}${key}` : props.value
            );
            if (props.value.length === 5) {
              emits("submit");
              emits("close");
              popupRef.value.close();
            }
            break;
          default:
            break;
        }
      } else {
        const parts = props.value.split(".");
        if (parts[1].length < 2) emits("update:value", `${props.value}${key}`);
      }
      break;
  }
  if (props.type === "digit") emits("check");
};

onMounted(() => {
  if (props.focus) onFocus();
});

defineExpose({ onFocus });
</script>

<style lang="scss">
.input {
  flex: 1;
  .value {
    flex: 1;
    font-size: 72rpx;
    line-height: 1;
    font-weight: 600;
  }
  .pwd-value {
    flex: 1;
    justify-content: center;
    align-items: center;
    .p-item {
      justify-content: center;
      align-items: center;
      margin-right: 12rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 8rpx;
      background-color: v-bind(background);
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
.keyboard {
  padding: 18rpx;
  padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
  border-top: 1px solid #ececec;
  background-color: #f6f6f6;
  .digit-mode {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 18rpx;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 18rpx 0;
      font-size: 36rpx;
      color: #222;
      font-weight: 600;
      border-radius: 10rpx;
      background-color: #fff;
      &.zero {
        grid-column: span 2;
      }
      &.confirm {
        grid-row: span 3;
        font-size: 28rpx;
        color: #fff;
        background-color: #57be6b;
      }
      &.current {
        background-color: #d7d7d7;
      }
      &.confirm-curr {
        background-color: #6bee88;
      }
    }
  }
  .password-mode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 18rpx;
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 18rpx 0;
      font-size: 36rpx;
      color: #222;
      font-weight: 600;
      border-radius: 10rpx;
      background-color: #fff;
      &.empty {
        background-color: rgba(0, 0, 0, 0);
      }
      &.current {
        background-color: #d7d7d7;
      }
    }
  }
}
</style>
